<template>
  <div class="my-process-designer__container">
    <div
      class="my-process-designer__canvas"
      ref="bpmnCanvas1"
      id="bpmnCanvas1"
      style="width: 1680px; height: 800px"
    ></div>
  </div>
</template>

<script setup lang="ts" name="Workcompent">
import BpmnModeler from 'bpmn-js/lib/Modeler'
import 'bpmn-js/dist/assets/diagram-js.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
import camundaModdleDescriptor from '@/components/bpmnProcessDesigner/package/designer/plugins/descriptor/camundaDescriptor.json'
import activitiModdleDescriptor from '@/components/bpmnProcessDesigner/package/designer/plugins/descriptor/activitiDescriptor.json'
import flowableModdleDescriptor from '@/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json'
// 标签解析 Extension
import camundaModdleExtension from '@/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/camunda'
import activitiModdleExtension from '@/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/activiti'
import flowableModdleExtension from '@/components/bpmnProcessDesigner/package/designer//plugins/extension-moddle/flowable'
// 翻译方法
import customTranslate from '@/components/bpmnProcessDesigner/package/designer/plugins/translate/customTranslate'
import translationsCN from '@/components/bpmnProcessDesigner/package/designer/plugins/translate/zh'
import DefaultEmptyXML from '@/components/bpmnProcessDesigner/package/designer/plugins/defaultEmpty'
let bpmnModeler: any = null
const $emit = defineEmits(['init-finished'])
const props = defineProps({
  prefix: {
    type: String,
    default: 'camunda'
  },
  value: String,
  processId: String, // 流程 key 标识
  processName: String // 流程 name 名字
})
const additionalModules = computed(() => {
  const Modules: any[] = []
  // 翻译模块
  const TranslateModule = {
    translate: ['value', customTranslate(translationsCN)]
  }
  Modules.push(TranslateModule)
  // 根据需要的流程类型设置扩展元素构建模块
  if (props.prefix === 'camunda') {
    Modules.push(camundaModdleExtension)
  }
  if (props.prefix === 'flowable') {
    Modules.push(flowableModdleExtension)
  }
  if (props.prefix === 'activiti') {
    Modules.push(activitiModdleExtension)
  }
  return Modules
})
const moddleExtensions = computed(() => {
  const Extensions: any = {}
  //根据需要的'流程类型'设置对应的解析文件
  if (props.prefix === 'activiti') {
    Extensions.activiti = activitiModdleDescriptor
  }
  if (props.prefix === 'flowable') {
    Extensions.flowable = flowableModdleDescriptor
  }
  if (props.prefix === 'camunda') {
    Extensions.camunda = camundaModdleDescriptor
  }
  return Extensions
})
// 初始化bpmn
const initBpmn = () => {
  let data = document.getElementById('bpmnCanvas1')
  bpmnModeler = new BpmnModeler({
    container: data,
    keyboard: { bindTo: document },
    additionalModules: additionalModules.value,
    moddleExtensions: moddleExtensions.value
  })
  $emit('init-finished', bpmnModeler)
}
// 创建新的流程图
const createNewDiagram = async (xml) => {
  console.log(xml)
  let newId = props.processId || `Process_${new Date().getTime()}`
  let newName = props.processName || `业务流程_${new Date().getTime()}`
  let xmlString = xml || DefaultEmptyXML(newId, newName, props.prefix)
  try {
    let { warnings } = await bpmnModeler.importXML(xmlString)
    console.log(warnings, 'warnings')
    if (warnings && warnings.length) {
      warnings.forEach((warn) => console.warn(warn))
    }
  } catch (e: any) {
    console.error(`[Process Designer Warn]: ${e.message || e}`)
  }
}
onMounted(() => {
  initBpmn()
  createNewDiagram(props.value)
})
onBeforeUnmount(() => {
  // 销毁
  if (bpmnModeler) bpmnModeler.destroy()
  bpmnModeler = null
})
</script>

<style lang="scss" scoped>
.my-process-designer__container {
  display: inline-flex;
  width: 100%;
  flex: 1;
  .my-process-designer__canvas {
    flex: 1;
    height: 100%;
    position: relative;
    background: url('')
      repeat !important;
  }
}
</style>
